<template>
	<view :class="['Orderdetails2',{'dark':theme=='dark'}]">
		<view class="wrap">
				<!-- 修改样式 -->
				<u-gap height="20" bg-color=""></u-gap>
				<u-table border-color="#22253c00" bg-color="#22253c00" align="left" padding="14rpx 0">
					<view :class="['juzonucom','tool-card',{'darksss':theme=='dark'}]">
						<view :class="['wrap','juzonucg',{'darksss':theme=='dark'}]">
							<u-tr>
								<u-td>
									<view class="fuwen">{{payMeMap[order.type]}} </view>
								</u-td>
								<u-td class="juzonuc">
									<view></view>
								</u-td>
								<u-td class="juzon">
									<view class="fuwenn">{{statusString}}</view>
								</u-td>
							</u-tr>
						</view>
				
						<u-line color="#5559691f"></u-line>
						<u-gap height="20" bg-color=""></u-gap>
						
						<u-tr>
							<u-td>{{$t('bico.W50')}}</u-td><u-td class="juzonuc"></u-td><u-td class="juzon">{{payMap[order.payMethod]}} {{order.payMethod=='BANK'?order.bank:""}}</u-td>
						</u-tr>
						
						<u-tr>
							<u-td>{{payPerMap[order.type]}}{{$t('bico.W51')}}</u-td><u-td class="juzonuc"></u-td><u-td class="juzon">{{order.payName}}</u-td>
						</u-tr>
						
						<u-tr>
							<u-td>{{$t('bico.W52')}}</u-td>
							<!-- <u-td class="juzonuc">
								{{payMap[order.payMethod]}}
							</u-td> -->
							<u-td class="juzon">
								<view class="juzonmns">
									<!-- <image class="igclass" style="" @click="copy(order.orderNo)" src="../../static/ico/fuzhi.png"></image> -->
									<!-- 支付宝 -->
									<view class="" v-if="order.payMethod=='ALI_PAY'">
										<image class="funsItemImage" style="margin-top: -1vw;" src="../../static/business/zfb.png"></image>
									</view>
									<!-- 微信 -->
									<view class="" v-if="order.payMethod=='WE_CHAT'">
										<image class="funsItemImage" style="margin-top: -1vw;" src="../../static/business/wx.png"></image>
									</view>
									<!-- 银行卡 -->
									<view class="" v-if="order.payMethod=='BANK'">
										<image class="funsItemImage" style="margin-top: -1vw;" src="../../static/business/yhk.png"></image>
									</view>
									<view class="" v-if="order.payMethod=='SWIFT'">
										<image class="funsItemImage" style="margin-top: -1vw;" src="../../static/business/payway/swift.png"></image>
									</view>
									<view class="" v-if="order.payMethod=='WEST'">
										<image class="funsItemImage" style="margin-top: -1vw;" src="../../static/business/payway/west.png"></image>
									</view>
									<view class="" v-if="order.payMethod=='PAYPAL'">
										<image class="funsItemImage" style="margin-top: -1vw;" src="../../static/business/payway/paypal.png"></image>
									</view>
								</view>
							</u-td>
						</u-tr>
						
						<u-tr>
							<u-td>{{$t('bico.W53')}}</u-td><u-td class="juzonuc"></u-td><u-td class="juzon">{{order.unitPrice}} CNY</u-td>
						</u-tr>
						
						<u-tr>
							<u-td>{{$t('bico.W54')}}</u-td><u-td class="juzonuc"></u-td><u-td class="juzon">{{order.cny}} CNY</u-td>
						</u-tr>
				
						<u-tr>
							<u-td>{{$t('bico.W55')}}</u-td><u-td class="juzonuc"></u-td><u-td class="juzon">{{order.number}} {{order.coin}}</u-td>
						</u-tr>
						<u-line color="#5559691f" v-if="order.status!= 'CANCEL'"></u-line>
						<!-- 不是取消状态下 显示账号 取消状态下不显示账户 -->
					
						<u-line color="#5559691f" v-if="order.status!= 'CANCEL'" ></u-line>
						<!-- 不是取消状态下 显示账号 取消状态下不显示账户 -->
						<u-tr v-if="order.status!= 'CANCEL'">
							<u-td >{{payPerMap[order.type]}}{{$t('bico.W56')}}</u-td>
							<u-td class="juzon" >
							</u-td>
						</u-tr>
						
						<u-tr v-if="order.status!= 'CANCEL'">
							<u-td>{{order.payAccount}}</u-td>
							<u-td class="juzon">
								<view class="juzonmns">
									<image class="igclass" style="" @click="copy(order.payAccount)" src="../../static/ico/fuzhi.png"></image>
								</view>
							</u-td>
						</u-tr>

						<!-- <u-tr>
							<u-td>参考 ID</u-td><u-td class="juzonuc">{{order.markNo}}</u-td><u-td class="juzon">
								<view class="juzonmns">
									<image class="igclass" style="" @click="copy(order.orderNo)" src="../../static/ico/fuzhi.png"></image>
								</view>
							</u-td>
						</u-tr> -->
						<u-line color="#5559691f"></u-line>
						<u-tr>
							<u-td>{{$t('bico.W57')}}</u-td>
							</u-td>
						</u-tr>
						<u-tr>
							<u-td>{{order.orderNo}}</u-td>
							<u-td class="juzonuc"></u-td>
							<u-td class="juzon">
								<view class="juzonmns">
									<image class="igclass" style="" @click="copy(order.orderNo)" src="../../static/ico/fuzhi.png"></image>
								</view>
							</u-td>
						</u-tr>
						<u-line color="#5559691f"></u-line>
						
						<u-tr>
							<u-td>{{$t('bico.W58')}}</u-td>
							<u-td class="juzonuc"></u-td>
							<u-td class="juzon">{{order.type == 'BUY'?order.buyName:order.sellName}}</u-td>
						</u-tr>
						
						<u-tr>
							<u-td>{{$t('bico.W59')}}</u-td>
							<u-td class="juzon">{{order.createTime}}</u-td>
						</u-tr>
						
						<!-- 如果订单取消读取这个显示 -->
						<u-tr v-if="order.status== 'CANCEL'">
							<u-td>{{$t('bico.W60')}}</u-td>
							<u-td class="juzon">{{order.cancelTime}}</u-td>
						</u-tr>
						<!-- <view v-if="order.status == 'WAIT_COIN'">
							<u-line color="#5559691f"></u-line>
							<u-tr >
								<u-td >联系{{order.type == 'BUY'? '卖家':'买家’'}}</u-td>
							</u-tr>
							<u-tr>
								<u-td>{{order.type == 'BUY'?order.sellAccount:order.buyAccount}}</u-td>
								<u-td class="juzonuc"></u-td>
								<u-td class="juzon">
									<view class="juzonmns">
										<image class="igclass" style="" @click="copy(order.type == 'BUY'?order.sellAccount:order.buyAccount)" src="../../static/ico/fuzhi.png"></image>
									</view>
								</u-td>
							</u-tr>
							<u-line color="#5559691f"></u-line>
						</view> -->
						<view v-if="order.status == 'WAIT_COIN'">
							<u-line color="#5559691f"></u-line>
							<u-tr >
								<u-td >交易说明：</u-td>
							</u-tr>
							<u-tr>
								<u-td>{{order.remark}}</u-td>
							</u-tr>
							<u-line color="#5559691f"></u-line>
						</view>
						
						
					</view>
					<u-gap height="20" bg-color=""></u-gap>
				</u-table>
				<!-- 修改样式 -->

				<!-- 交易反馈 -->
				
				
				<!-- 状态开始 -->
				<!-- 买家 状态为 等待付款 状态显示 -->
				<view class="flex alcenter mt10 plr20" v-show="myType == 0 && order.status == 'WAIT' && timestamp>0">
					<!-- 倒计时 -->
					<u-count-down :timestamp="timestamp" :end="tradeCancel"></u-count-down>
					<view class="chengse ft14 plr20">{{$t('bico.W61')}}</view>
				</view>
				<!-- 买家 状态为 等待放币 状态显示  -->
				<view class="flex alcenter mt10 plr20" v-show="myType == 0 && order.status == 'WAIT_COIN' && timestamp2>0">
					<u-count-down :timestamp="timestamp2" :end="getOrderDetail" ></u-count-down>
					<view class="chengse ft14 plr20"><image style="width: 5vw;" src="../../static/image/tssp.png" class="wt15 h15">
					</image>{{$t('bico.W62')}}</view>
				</view>
				<!--  -->
				<view class="flex alcenter mt10 plr20" v-show="myType == 1 && order.status == 'WAIT_COIN' && timestamp2>0">
					<u-count-down :timestamp="timestamp2" ></u-count-down>
					<view class="chengse ft14 plr20">{{$t('bico.W63')}}</view>
				</view>
				<!-- 状态结束 -->
			</u-row>
			
			<!-- 按钮开始 -->
			<!-- 买家状态为 等待付款 显示的代码 分为 已完成付款和取消 -->
			<view v-if="myType == 0 && order.status == 'WAIT'">
				<view class="buwid">
					<u-button :custom-style="customStyle" size="default" @click="tradePaid" type="primary" v-show="timestamp>0">{{$t('bico.W64')}}</u-button>
					<u-button :custom-style="customStyle" size="default" type="primary" :disabled="true" v-show="timestamp<=0">{{$t('bico.W65')}}</u-button>
				</view>
				<view class="buwid">
					<u-button :custom-style="customStyle" size="default" @click="tradeCancel" type="primary">{{$t('bico.W66')}}</u-button>
				</view>

			</view>
			<!-- 卖家状态为等待放币 显示的代码 分为放币 和申诉,.买家虽然点击了已完成付款，但是付款没到账 -->
			<view v-if=" order.status == 'WAIT_COIN'">
				<view>
					<view class="buwid"  v-if="myType == 1 "> <!-- 卖家-->
						<u-button :custom-style="customStyle" size="default" type="primary" @click="passShowFun">{{$t('bico.W67')}}</u-button>
					</view>
					
					<view class="buwid" v-if="myType == 0 "> <!-- 买家-->
						<u-button :custom-style="customStyle" size="default" :disabled="true" type="primary"  >{{$t('bico.W68')}}</u-button>
					</view>
					
					
					<view class="buwid">
						<u-button :disabled="timestamp2>=0" size="default" :custom-style="customStyle" type="primary" @click="appeal">{{$t('bico.W69')}}</u-button>
					</view>
					<view class="buwid" v-if="myType == 0 "> <!-- 买家-->
						<u-button :custom-style="customStyle" size="default" type="primary" @click="toUploadImg" >{{$t('bico.W798')}}</u-button>
					
					</view>
				</view>
			</view>
			<!-- 按钮结束 -->
			<!-- 申述开始 申诉状态下谁都可以发起申诉，后台一个订单只有一个申诉记录，重复申诉会覆盖-->
			<view v-if="order.status == 'APPEAL'">
				<u-button type="primary" @click="appeal">{{$t('bico.W69')}}</u-button>
			</view>
			<!-- 申诉内容  申述状态显示-->
			<u-row gutter="16" v-if="order.status == 'APPEAL'">
				<!-- 买家的内容 如果我是买家就显示我  v-if 有内容，则显示-->
				<u-col span="4" v-if="order.content!=''">
					<view class="vw60">{{myType == 0?'我':'买家'}}{{$t('bico.W70')}}</view>
				</u-col>
				<u-line color="#5559691f" v-if="order.content!=''"></u-line>
				<u-col span="4" v-if="order.content!=''">
					<view class="demo-layout2 vw60">{{$t('bico.W71')}}</view>
				</u-col>
				<u-col span="4" v-if="order.content!=''">
					<view class="demo-layout2 vw60">{{order.content}}</view>
				</u-col>
				
				<u-line color="#5559691f" v-if="order.content!=''"></u-line>
				<u-col span="4" v-if="order.content!=''">
					<view class="demo-layout2 vw60">{{$t('bico.W72')}}</view>
				</u-col>
				<u-col span="4" v-if="order.content!=''">
					<view class="demo-layout2 vw60">{{order.atime}}</view>
				</u-col>
				
				<u-line color="#5559691f" v-if="order.content!=''"></u-line>
				<u-col span="4" v-if="order.img!=''">
					<view class="vw75">
						<image :src="domain+order.img"></image>
					</view>
				</u-col>
				<u-line color="#5559691f"></u-line>
				<!-- 卖家的内容 如果我是卖家就显示我  v-if 有内容，则显示-->
				<u-col span="4" v-if="order.content1!=''">
					<view class="vw60">{{myType == 1?'我':'卖家'}}{{$t('bico.W73')}}</view>
				</u-col>
				<u-line color="#5559691f" v-if="order.content1!=''"></u-line>
				<u-col span="4" v-if="order.content1!=''">
					<view class="demo-layout2 vw60">{{$t('bico.W71')}}</view>
				</u-col>

				<u-col span="4" v-if="order.content1!=''">
					<view class=" vw60">{{order.content1}}</view>
				</u-col>
				<u-line color="#5559691f" v-if="order.content1!=''"></u-line>
				<u-col span="4" v-if="order.content1!=''">
					<view class="demo-layout2 vw60">{{$t('bico.W72')}}</view>
				</u-col>
				
				<u-col span="4" v-if="order.content1!=''">
					<view class=" vw60">{{order.atime1}}</view>
				</u-col>
				<u-line color="#5559691f" v-if="order.content1!=''"></u-line>
				<u-col span="4" v-if="order.img1!=''">
					<view class="vw75">
						<image :src="domain+order.img1"></image>
					</view>
				</u-col>

				<u-line color="#5559691f"></u-line>

			</u-row>
			<!-- 申诉结束 -->


			<!-- <u-button type="primary">撤 单</u-button>
			<u-button type="primary">撤 单</u-button> -->
			<!-- 放币的弹窗 -->
			<u-popup v-model="passShow" mode="center" width="55%" height="15%">
					<view class="passbox">
						<view class="input">
							<view><input class="uni-input" cursor-spacing="0"
									:adjust-position="false" v-model="payPwd" type="password"
									placeholder="请输入交易密码" />
							</view>
							<view><text class="i cny"></text> <text class="i all"></text></view>
						</view>
						<view class="btns">
							<view @click="payPwd='';passShow = false" class="btn cancel">{{$t('bico.W74')}}</view>
							<view @click="otcFinish" class="btn" :class="payPwd ? 'submit' : 'cancel'">{{$t('bico.W75')}}</view>
						</view>
					</view>
				</u-popup>
		</view>
    </view>
</template>
<script>
	import {
		domain
	} from '@/common/domain.js'
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'vuex';
	import {
		depositPage,
		deposit,
		tradeBuyWaitPage,
		tradeCancel,
		tradeCancelPre,
		tradePaid,otcFinish
	} from '../../common/apiString.js'
	import {
		myMixins
	} from '@/common/myMixins.js' //加入全局下拉刷新
	export default {
		mixins: [myMixins],
		components: {},
		data() {
			return {
				action: domain+'/api/upload/img',
				uploadText:this.$t('bico.W795'),
				passShow:false,
				domain: domain,
				timestamp: 0,
				timestamp2: 0,
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					//color: 'red',
					width: '100%'
				},
				myType: 0,
				order: {},
				orderNo: "",
				payMeMap: {
					'BUY': this.$t('bico.W76'),
					'SELL': this.$t('bico.W77'),
				},
				payPerMap: {
					'BUY': this.$t('bico.W78'),
					'SELL': this.$t('bico.W79'),
				},

				statusMap: {
					'WAIT': this.$t('bico.W80'),
					"WAIT_COIN": this.$t('bico.W81'),
					"FINISH": this.$t('bico.W82'),
					"APPEAL": this.$t('bico.W83'),
					"CANCEL": this.$t('bico.W84'),
				},
				payMap: {
					ALI_PAY: this.$t('bico.W85'),
					WE_CHAT: this.$t('bico.W86'),
					BANK: this.$t('bico.W87'),
					SWIFT:this.$t('bico.swift'),
					WEST:this.$t('bico.west'),
					PAYPAL:this.$t('bico.paypal'),
				},
				statusString: '',
				statusContent: '',
				payPwd:''

			}
		},
		onShow() {

		},
		computed: {
			...mapState({
				theme: state => state.theme
			}),
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数 
            this.$utils.setTitle(this.$t('bico.W106'),)
			console.log(option.orderNo); //打印出上个页面传递的参数。
			this.orderNo = option.orderNo
			this.myType = option.myType
			this.getOrderDetail()
		},
		onShow: function(option){
			// console.log(option.orderNo); //打印出上个页面传递的参数。
			// this.orderNo = option.orderNo
			// this.myType = option.myType
			this.getOrderDetail()
		},
		methods: {
			chang(res, index, lists, name){
				
				console.log(res)
			},
			onRemove(index, lists) {
				//this.form.img=''
			},
			afterUpload(data, index, lists, name) {
				console.log(data)
				if (data.code == 200) {
					this.$utils.showLayer(this.$t('bico.W601'));
					this.form.img = data.data.src
				} else {
					this.$utils.showLayer(msg);
				}
				console.log(data);
			},
			passShowFun(){
				this.payPwd='';
				this.passShow = true
			},
			copy(txt) {
				uni.setClipboardData({
					data: txt,
					success: function () {
						that.$utils.showLayer(that.$t('assets.copy_success'))  
					},fail:function() {
						that.$utils.showLayer(that.$t('assets.copy_err')) 
					}
				});
			},
			//路由开始
			funsItemClick(index) {
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/business/bzj' //公告
					})
				};
				if (index == 2) {
					uni.navigateTo({
						url: '/pages/assets/assets' //我的资产
					})
				};

			},
			appeal(){
				uni.navigateTo({
					url: '/pages/business/appeal?orderNo='+this.orderNo+'&myType='+this.myType //投诉订单
				})
			},
			toUploadImg(){
				uni.navigateTo({
					url: '/pages/business/toUploadImg?orderNo='+this.orderNo //投诉订单
				})
			},
			otcFinish(){
				var that =this
				if(this.payPwd == ''){
					return
				}
				// uni.showLoading()
				this.$utils.initDataToken({
					url: otcFinish,
					data:{
						orderNo:this.order.orderNo,
						payPwd:this.payPwd
					},
					type: 'post'
				}, (res, msg) => {
					uni.hideLoading()
					this.passShow =false
					this.getOrderDetail()
					that.$utils.showLayer(this.$t('bico.W88'),);
					
				})
			},
			getdepositPage() {
				this.$utils.initDataToken({
					url: depositPage,
					type: 'post'
				}, (res, msg) => {
					this.deposit = res.USDT
					this.usedPrice = res.usedPrice
				})
			},
			tradePaid(){
				this.$utils.initDataToken({
					url: tradePaid,
					data: {
						orderNo: this.orderNo
					},
					type: 'post'
				}, (res, msg) => {
					this.getOrderDetail()
				})
			},
			tradeCancel() {
				var that = this
				uni.showModal({
					title: this.$t('bico.W89'),
					content: this.$t('bico.W90'),
					showCancel: true,
					confirmColor: '#00aaff',
					cancelColor: '#ff5500',
					success: function(res) {
						if (res.confirm) {
							// uni.showLoading()
							that.$utils.initDataToken({
								url: tradeCancel,
								data: {
									orderNo: that.order.orderNo,
								},
								type: 'post'
							}, (res, msg) => {
								uni.hideLoading()
								that.$utils.showLayer(this.$t('bico.W91'),);
								that.getOrderDetail()
							})
							console.log(this.$t('bico.W92'),);
						} else if (res.cancel) {
							console.log(this.$t('bico.W93'),);
						}
					}
				});
			},
			getOrderDetail() {
				this.$utils.initDataToken({
					url: tradeBuyWaitPage,
					data: {
						orderNo: this.orderNo
					},
					type: 'post'
				}, (res, msg) => {
					this.order = res

					this.statusString = this.getStatus(res.status)
					//下单时间加倒计时的时间， 换成时间戳(15分钟乘以60秒乘以1000) 减去当前时间搓
					if(res.status=='WAIT'){
						this.timestamp = (Number(res.createTimestamp) + Number((60 * 60 * 1000)) - res.now)/1000;
					}
					if(res.status == 'WAIT_COIN'){
						this.timestamp2 = (Number(res.payTimestamp) + Number((60 * 60 * 1000)) - res.now)/1000;
					}
					
				})
			},
			timeZero() {
				this.statusString = this.getStatus("CANCEL")
			},
			//状态 上左
			getStatus(status) {
				var that = this;
				var txt = '';
				switch (status) {
					case 'WAIT':
						if (that.myType == '0') {
							txt = this.$t('bico.W94')
						} else {
							txt = this.$t('bico.W95')
						}
						break;
					case 'FINISH':
						txt = this.$t('bico.W96')
						break;
					case 'WAIT_COIN':
						if (that.myType == '0') {
							txt = this.$t('bico.W97')
						} else {
							txt = this.$t('bico.W98')
						}
						break;
					case 'CANCEL':
						txt = this.$t('bico.W99')
						break;
					case 'APPEAL':
						txt = this.$t('bico.W100')
						break;
					default:
						break;
				}

				return txt;
			},
			//状态对应解释 上右
			getStatusContent(status) {
				var that = this
				var txt = ''
				switch (status) {
					case 'WAIT':
						if (that.myType == '0') {
							txt = this.$t('bico.W101')
						} else {
							// 买家已下单等待买家付款
							txt = this.$t('bico.W102')
						}
						break;
					case 'FINISH':
						txt = that.$t('orderStatus.orderFinish')
						break;
					case 'WAIT_COIN':
						if (that.myType == 'BUY') {
							txt = this.$t('bico.W103')
						} else {
							txt = this.$t('bico.W104')
						}
						break;
					case 'CANCEL':
						txt = 'orderCancel'
						break;
					case 'APPEAL':
						txt = this.$t('bico.W105')
						break;
					default:
						break;
				}
				return txt
			}
			//路由结束
		},
	}
</script>
<style scoped lang="scss">

	.Orderdetails2 {
		
		width: 100%;
		height: 100%;
		background: #f7f7f7;
		
		uni-view {
		    box-sizing: border-box;
		    line-height: 1.2;
		}
		.passbox {
			position: fixed;
			background: #fff;
			display: flex;
			flex-direction: column;
			padding: 30upx 30upx;
			font-size: 28upx;
		
			.input {
				line-height: 1.8;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 14upx 10upx;
				margin: 20upx 0;
				border: 1upx solid #8B9FAA;
		
				input {
					color: #0952C3;
					font-size: 28upx;
				}
		
				.cny {
					line-height: 1.8;
					margin-right: 20upx;
					color: #0952C3;
				}
		
				.all {
					line-height: 1.8;
					margin-left: 20upx;
					color: #0952C3;
				}
			}
		
			.btns {
				line-height: 1.8;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				width: 100%;
				padding: 10upx 0;
		
				.btn {
					display: block;
					width: 48%;
					height: 70upx;
					line-height: 70upx;
					text-align: center;
					color: #fff;
					border-radius: 0;
					font-size: 28upx;
				}
		
				.cancel {
					background: #96A7BA;
				}
		
				.submit {
					background: #0952C3;
				}
			}
		}
		image {
			width: 90vw;
			max-height: 50vw;
			object-fit: cover;
			border-radius: 4px;
			margin-top: 5vw;
		}



		.vw60 {
			width: 130vw
		}

		.vw75 {
			width: 75vw
		}

		page {
			background: #f8f8f99c;
		}

		.wrap {
			padding: 4px 6px;

			.funsItemImage {
				position: relative;
				top: 0vw;
				width: 6vw;
				height: 6vw;
				border-radius: 0%;
			}

			.gman {
				position: relative;
				width: 90%;
				//right: 0;
				text-align: right;
			}
		}

		.u-row {
			margin: 20px 0px;
			/* border: 0.5px solid #f4f4f5; */
			width: 100%;
			background-color: #fff;
			border-radius: 1vw;
			padding: 2px;
			margin-top: 10px;
			/* border: 0.5px solid #f4f4f5; */
		}

		.demo-layout {
			height: 40px;
			line-height: 40px;
			font-size: 3.4vw;
			font-weight: 700;
		}

		.bg-purple {
			background: #d3dce6;
		}

		.bg-purple-light {
			background: #e5e9f2;
		}

		.bg-purple-dark {
			background: #99a9bf;
		}
		.igclass {
			position: relative;
			top: -1vw;
			margin-top: 0vw;
			left: 0vw;
			text-align: right;
			width: 6vw;
			height: 6vw;
		}
		.juzon {
			text-align: right!important;
		}
		.juzonuc {
		
			position: relative;
			top: 0vw;
			left: 7vw;
			font-size: 14px;
			font-family: Times New Roman,Times,serif;
		}
		.juzonucg {
			text-align: left;
			font-size: 14px;
			padding: 0px 2px;
			font-weight: 700;
		}
		.juzonucom {
			border: 0.5px solid #7079ab24;
			border-radius: 8px;
			padding: 0px 4px;
		}
		.juzonup {
			text-align: right!important;
			position: relative;
			top: -2vw;
			left: 22vw;
		}
		
		.tool-card {
			background-color: #ffffff;
		}
		.fuwen {
			color: #ffffff;
			background-color: #2979ff;
			width: 25px;
			height: 25px;
			line-height: 25px;
			text-align: center;
			font-size: 16px;
			font-weight: 400;
			border-radius: 30px;
		}
		.fuwenn {
			line-height: 25px;
			font-size: 16px;
			font-weight: 600;
		}
		
		.redee {
			color: #FF5722!important;
			font-size: 16px!important;
			font-weight: 700!important;
		}
		.greee {
			color: #4CAF50!important;
			font-size: 16px!important;
			font-weight: 700!important;
		}
	
	}
</style>
